<template>
  <div class="document-library">
    <div class="library-header">
      <div class="header-bg">
        <div class="filter-tabs">
          <div class="tab-item active">公文库</div>
          <div class="tab-item">写作素材</div>
          <div class="tab-item">领导金句</div>
          <div class="tab-item">政策法规</div>
          <div class="tab-item">个人收藏</div>
        </div>
        <div class="search-bar">
          <el-input
            v-model="searchKeyword"
            placeholder="请输入关键词搜索"
            class="search-input"
          >
            <template #append>
              <el-button type="primary">搜索</el-button>
            </template>
          </el-input>
        </div>
        <div class="stats-row">
          <div class="stat-item">
            <div class="stat-label">总数据</div>
            <div class="stat-value">124<span class="unit">篇</span></div>
          </div>
          <div class="stat-item">
            <div class="stat-label">中央政府公文</div>
            <div class="stat-value">124<span class="unit">篇</span></div>
          </div>
          <div class="stat-item">
            <div class="stat-label">地方政府公文</div>
            <div class="stat-value">124<span class="unit">篇</span></div>
          </div>
          <div class="stat-item">
            <div class="stat-label">其他公文</div>
            <div class="stat-value">124<span class="unit">篇</span></div>
          </div>
        </div>
      </div>
    </div>

    <div class="library-content">
      <div class="content-layout">
        <!-- 左侧导航树 -->
        <div class="nav-tree">
          <el-tree
            :data="treeData"
            :props="defaultProps"
            :expand-on-click-node="false"
            node-key="id"
            default-expand-all
            highlight-current
            @node-click="handleNodeClick"
          >
            <template #default="{ node, data }">
              <div class="custom-tree-node">
                <span>{{ node.label }}</span>
                <span v-if="data.count" class="count">({{ data.count }})</span>
              </div>
            </template>
          </el-tree>
        </div>

        <!-- 右侧内容区 -->
        <div class="content-main">
          <div class="search-result-header">
            <div class="result-count">
              本次呈现最近的 <span class="highlight">1000</span> 篇，共检索到 <span class="highlight">421145</span> 篇
            </div>
            <div class="result-actions">
              <span class="action">相关度 ↓</span>
              <span class="divider">|</span>
              <span class="action">时间 ↓</span>
              <span class="divider">|</span>
              <span class="action">时间不限 ↓</span>
            </div>
          </div>

          <div class="document-items">
            <div v-for="(item, index) in documentList" :key="index" class="document-item">
              <h3 class="item-title">{{ item.title }}</h3>
              <p class="item-desc">{{ item.description }}</p>
              <div class="item-tags">
                <span v-for="(tag, tagIndex) in item.tags" :key="tagIndex" class="tag">{{ tag }}</span>
              </div>
              <div class="item-footer">
                <span class="publish-date">发布日期：{{ item.publishDate }}</span>
                <span class="view-count">浏览量：{{ item.viewCount }}</span>
                <el-button class="star-btn" text>
                  <el-icon><Star /></el-icon>
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Star } from '@element-plus/icons-vue'
import type { TreeNodeData } from 'element-plus'

const searchKeyword = ref('')

// 树形数据
const treeData = ref([
  {
    id: 1,
    label: '全部',
    count: 785,
    children: [
      {
        id: 2,
        label: '纪要',
        count: 120
      },
      {
        id: 3,
        label: '决定',
        count: 85
      },
      {
        id: 4,
        label: '命令',
        count: 45
      },
      {
        id: 5,
        label: '公告',
        count: 67
      },
      {
        id: 6,
        label: '公报',
        count: 34
      },
      {
        id: 7,
        label: '通告',
        count: 89
      },
      {
        id: 8,
        label: '意见',
        count: 92
      },
      {
        id: 9,
        label: '通知',
        count: 156
      },
      {
        id: 10,
        label: '通报',
        count: 45
      },
      {
        id: 11,
        label: '报告',
        count: 52
      }
    ]
  },
  {
    id: 12,
    label: '所属领域',
    children: [
      {
        id: 13,
        label: '教育开放'
      },
      {
        id: 14,
        label: '新型工业化'
      },
      {
        id: 15,
        label: '进口设备检验优化'
      }
    ]
  }
])

const defaultProps = {
  children: 'children',
  label: 'label'
}

const handleNodeClick = (data: TreeNodeData) => {
  console.log(data)
}

const documentList = ref([
  {
    title: '2025投资中国，有这些新机遇！',
    description: '日前，《2025年对外行动方案》印发，2025年投资中国有哪些新机遇，一起看——这些领域扩大开放大提速。医疗、教育等领域开放提速点，●发挥城市圈经济优势...',
    tags: ['教育开放', '新型工业化', '进口设备检验优化'],
    publishDate: '2025-02-19',
    viewCount: 80
  },
  {
    title: '上海市发展和改革委员会关于车用汽、柴油价格的通知（2025年2月19日）',
    description: '上海市发展和改革委员会关于车用汽、柴油价格的通知产发改收价管〔2025〕7号各区发展改革委、中石化上海石油分公司、中石油上海销售分公司、中海油销售上海...',
    tags: ['零售企业自主定价', '国家发展改革委', '中石化上海石油'],
    publishDate: '2025-02-19',
    viewCount: 21
  }
])
</script>

<style lang="scss" scoped>
.document-library {
  padding: 0;
  background-color: #fff;
  min-height: 100vh;

  .library-header {
    .header-bg {
      background: linear-gradient(180deg, rgba(24, 54, 122, 0.9) 0%, rgba(24, 54, 122, 0.8) 100%);
      padding: 20px;

      .filter-tabs {
        display: flex;
        gap: 32px;
        margin-bottom: 24px;
        padding: 0 100px;
        justify-content: center;

        .tab-item {
          color: rgba(255, 255, 255, 0.8);
          font-size: 15px;
          cursor: pointer;
          padding: 4px 0;
          position: relative;

          &.active {
            color: #fff;
            font-weight: 500;

            &::after {
              content: '';
              position: absolute;
              bottom: -2px;
              left: 0;
              width: 100%;
              height: 2px;
              background-color: #fff;
            }
          }

          &:hover {
            color: #fff;
          }
        }
      }

      .search-bar {
        max-width: 800px;
        margin: 0 auto 32px;
        
        .search-input {
          :deep(.el-input__wrapper) {
            background-color: rgba(255, 255, 255, 0.9);
            box-shadow: none;
            border-radius: 24px 0 0 24px;
            padding-left: 24px;
          }

          :deep(.el-input__inner) {
            height: 48px;
            font-size: 15px;
            &::placeholder {
              color: #999;
            }
          }

          :deep(.el-input-group__append) {
            background-color: #409EFF;
            border-color: #409EFF;
            color: #fff;
            padding: 0 32px;
            font-size: 15px;
            border-radius: 0 24px 24px 0;
            
            .el-button {
              font-weight: normal;
            }
          }
        }
      }

      .stats-row {
        display: flex;
        justify-content: center;
        gap: 20px;
        padding: 0 40px;

        .stat-item {
          text-align: center;
          color: #fff;
          padding: 10px 50px;
          background-color: rgba(255, 255, 255, 0.2);
          border-radius: 5px;

          .stat-label {
            font-size: 14px;
            opacity: 0.9;
            margin-bottom: 8px;
          }

          .stat-value {
            font-size: 22px;
            font-weight: 500;
            line-height: 1;

            .unit {
              font-size: 14px;
              margin-left: 4px;
              font-weight: normal;
              opacity: 0.9;
            }
          }
        }
      }
    }
  }

  .library-content {
    margin-top: 10px;
    padding: 0 20px;
    position: relative;
    z-index: 1;

    .content-layout {
      display: flex;
      gap: 20px;
      min-height: calc(100vh - 280px);

      .nav-tree {
        width: 240px;
        flex-shrink: 0;
        background: #fff;
        border-radius: 4px;
        border: 1px solid #e4e7ed;

        .document-type {
          padding: 16px;
          border-bottom: 1px solid #e4e7ed;
          
          .type-name {
            font-weight: 500;
            font-size: 14px;
            margin-right: 8px;
          }
          
          .type-count {
            color: #999;
            font-size: 13px;
          }
        }

        :deep(.el-tree) {
          padding: 12px;
          background: transparent;
          
          .el-tree-node {
            .el-tree-node__content {
              height: 36px;
              border-radius: 4px;
              
              &:hover {
                background-color: #f5f7fa;
              }
              
              &.is-current {
                background-color: #ecf5ff;
                color: #409EFF;
              }
            }

            .custom-tree-node {
              display: flex;
              align-items: center;
              font-size: 14px;
              color: #606266;
              
              .count {
                margin-left: 4px;
                font-size: 13px;
                color: #999;
              }
            }
          }

          .el-tree-node.is-expanded > .el-tree-node__children {
            padding-left: 20px;
          }

          .el-tree-node__expand-icon {
            font-size: 12px;
            color: #909399;
            
            &.expanded {
              transform: rotate(90deg);
            }
          }
        }
      }

      .content-main {
        flex: 1;
        background: #fff;
        border-radius: 4px;
        border: 1px solid #e4e7ed;

        .search-result-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 16px 20px;
          border-bottom: 1px solid #e4e7ed;
          
          .result-count {
            color: #606266;
            font-size: 14px;
            
            .highlight {
              color: #409EFF;
              font-weight: 500;
            }
          }

          .result-actions {
            display: flex;
            align-items: center;
            gap: 16px;
            color: #606266;
            font-size: 14px;

            .action {
              cursor: pointer;
              &:hover {
                color: #409EFF;
              }
            }

            .divider {
              color: #dcdfe6;
              font-weight: normal;
            }
          }
        }

        .document-items {
          .document-item {
            padding: 20px;
            border-bottom: 1px solid #e4e7ed;

            .item-title {
              font-size: 16px;
              color: #333;
              margin-bottom: 12px;
              cursor: pointer;
              font-weight: normal;

              &:hover {
                color: #409EFF;
              }
            }

            .item-desc {
              color: #666;
              font-size: 14px;
              margin-bottom: 12px;
              line-height: 1.5;
            }

            .item-tags {
              margin-bottom: 12px;
              display: flex;
              gap: 12px;

              .tag {
                color: #409EFF;
                font-size: 13px;
                cursor: pointer;

                &:hover {
                  text-decoration: underline;
                }
              }
            }

            .item-footer {
              display: flex;
              align-items: center;
              color: #999;
              font-size: 13px;

              .publish-date {
                margin-right: 16px;
              }

              .view-count {
                margin-right: 16px;
              }

              .star-btn {
                padding: 0;
                color: #999;

                &:hover {
                  color: #409EFF;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style> 